<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_天气案例-watch监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>最佳奥斯卡得主是-{{mappingName}} !!!</h1>
        <br>
        <button @click="changeName">点此切换</button>
    </div>

    <script type="text/javascript">
        let nameId = 1
        new Vue({
            el:'#root',
            data(){
                return{
                    nameId
                }
            },
            methods:{
                changeName(){
                    console.log('@',this.nameId);
                    if(this.nameId === 1){
                        this.nameId = 2
                    }else if(this.nameId === 2) {
                        this.nameId = 3
                    }else {
                        this.nameId = 1
                    }
                }
            },
            computed:{
                mappingName() {
                    let perName;
                    if(this.nameId === 1) {
                        perName = '渣渣辉'
                    }else if(this.nameId === 2) {
                        perName = '梁家辉'
                    }else {
                        perName = '星爷'
                    }
                    return perName;
                }
            },
            watch:{
                // 待监视的属性,普通和计算类属性都可以被触发
                mappingName:{
                    // 属性发生变化时,handler被触发,并传入newData,oldData
                    handler(newD, oldD){
                        alert("nameId被修改了" + "之前的" + oldD +
                    "最新的" + newD)
                    },

                    // immediate 配置值,布尔类型,初始化时让handler调用一下
                    immediate:true
                }
            }
        })
        // .$watch('mappingName',{
        //     handler(newD,oldD) {
        //         // alert("影帝从"+oldD+"变成了"+newD)
        //     }
        // })
    </script>
</body>

</html>